<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <h1>axios请求</h1>
             <div>
                 <h1>get的 请求</h1>
                 <button @click='fn1'>get请求</button>
                 <h1>post参数请求</h1>
                 <button @click='fn2'>post请求</button>

                 <ul v-for="(item,index) in citys" :key='index'>
                    <li>
                        {{item}}
                    </li>
                 </ul>
             </div>
        </div>
    </div>

    <script>
        var app = new Vue({
            el: "#app",
            beforeMount() { },
            created() { },      
            mounted() { },
            beforeUpdate() { },
            updated() { },
            beforeDestroy() { },
            destroyed() { },
            data: {
                name: "Vue.js",
                citys:[]
            },
            methods: {
                fn1() { 
                    axios({
                        url:'http://localhost:5003/httpvue',
                        method:'get',
                        // 带参数
                        params:{
                            city:'city2list'
                        }
                    }).then((res)=>{
                        console.log(res)
                        this.citys = res.data.msg
                        console.log(this.citys)
                       
                    })
                },

                fn2() {
                    axios({
                        url:'http://localhost:5003/httpvue',
                        method:'post',
                        data:{
                            username:'zs',
                            pass:123456
                        }
                    }).then((res)=>{
                        console.log(res)
                        this.citys = res.data.msg
                        console.log(this.citys)
                       
                    })
                },
                aaa(){ },
            },
            computed: {},
            watch: {},
            filters: {},
        });


    </script>
</body>

</html>